import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'

import { TabBar } from 'antd-mobile'
const Item = TabBar.Item

class NavFooter extends Component {
  static propTypes = {
    navList: PropTypes.array.isRequired,
    unReadCount: PropTypes.number.isRequired
  }

  render() {
    const { navList, unReadCount } = this.props
    const path = this.props.location.pathname
    return (
      <div style={{position: 'fixed', bottom: '0', width: '100%', zIndex: '1000'}}>
        <TabBar>
          {navList.map((e, i) =>
            <Item key={i}
              badge={e.text === '消息' ? unReadCount : 0}
              title={e.text}
              icon={{ uri: require(`./img/${e.icon}.png`) }}
              selectedIcon={{ uri: require(`./img/${e.icon}-selected.png`) }}
              selected={path === e.path}
              onPress={() => { this.props.history.replace(e.path)}}
            ></Item>
          )}
        </TabBar>
      </div>
    )
  }
}
//向外暴露withRouter，得到当前的路由路径  ,history/location/replace
export default withRouter(NavFooter)